import React, { useMemo } from 'react';
import { View, Text, Image, TextInput, Button, TouchableOpacity, StyleSheet } from 'react-native';
import useRem from '../rem/rem';

// 提取为可复用的 Input 组件
const InputField = ({ icon, placeholder, style }) => {
  const rem = useRem();

  const styles = useMemo(() => StyleSheet.create({
    container: {
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      padding: 20,
    },
    title: {
      fontSize: 24,
      marginBottom: 30,
      textAlign: 'center',
      fontWeight: '600',
      marginTop: 30,
    },
    inputContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#ccc',
      marginBottom: 20,
    },
    icon: {
      width: 20,
      height: 20,
      marginHorizontal: 10,
    },
    textInput: {
      flex: 1,
      height: 30,
      paddingLeft: 10,
    },
    forgotPasswordContainer: {
      alignItems: 'flex-end',
      marginTop: 20,
      marginRight: 10
    },
    forgotPassword: {
      color: '#646eb5',
    }
  }), [rem])

  return (
    <View style={[styles.inputContainer, style]}>
      <Image
        source={icon}
        style={styles.icon}
      />
      <TextInput
        placeholder={placeholder}
        style={styles.textInput}
      />
    </View>
  );
};

export default function Login({ navigation }) {
  const rem = useRem();

  const styles = useMemo(() => StyleSheet.create({
    container: {
      width: '100%',
      height: '100%',
      backgroundColor: '#fff',
      padding: rem(20),
    },
    title: {
      fontSize: rem(24),
      marginBottom: rem(30),
      textAlign: 'center',
      fontWeight: '600',
      marginTop: rem(30),
    },
    inputContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: '#ccc',
      marginBottom: rem(20),
    },
    icon: {
      width: rem(20),
      height: rem(20),
      marginHorizontal: rem(10),
    },
    textInput: {
      flex: 1,
      height: rem(30),
      paddingLeft: rem(10),
    },
    forgotPasswordContainer: {
      alignItems: 'flex-end',
      marginTop: rem(20),
      marginRight: rem(10)
    },
    forgotPassword: {
      color: '#646eb5',
    }
  }), [rem])

  return (
    <View style={styles.container}>
      <Text style={styles.title}>登    录</Text>

      <InputField
        icon={require('../image/login/手机.png')}
        placeholder="输入手机号"
        style={{ marginBottom: rem(20) }}
      />

      <View style={{position:'relative'}}>
        <InputField
          icon={require('../image/login/密码.png')}
          placeholder="输入密码"
          style={{ marginBottom: rem(20), position: 'relative' }}
        >
        </InputField>

        <Text style={{
          position:'absolute',
          right:rem(10),
          top:rem(5),
          color: '#999',
        }}>发送验证码</Text>
      </View>

      <InputField
        icon={require('../image/login/验证码.png')}
        placeholder="输入验证码"
        style={{ marginBottom: rem(20) }}
      />
      <View style={{ width: rem(315), marginLeft: rem(15), marginTop: rem(20) }}>
        <Button title='登录' color="#0079fe" />
      </View>

      <TouchableOpacity onPress={() => navigation.navigate('Missing')} style={styles.forgotPasswordContainer}>
        <Text style={styles.forgotPassword}>忘记密码</Text>
      </TouchableOpacity>
    </View>
  );
}